{% extends "帖子/Yy天涯/H5/template.html" %}
{% block title %}热门分类{% endblock %}
{% block css %}

{% include '帖子/Yy天涯/H5/include/topic_item_css.html' %}
{% endblock %}
{% block body %}

{% include "帖子/Yy天涯/H5/include/search.html" %}


<div class="topic_box">

    <!-- <a href="/web/HaiJiaoH5/topic_detail/?id=444444" class="topic_item Yy-d-flex">
        <div class="topic_img"><img src="/static/CloudImages/loading_gif/Yin and Yang.gif" alt="Yy"
                class="Yy-h-100 Yy-w-100 Yy-br-8" data-yy_path="0"></div>
        <div class="topic_info ">
            <h3 class="Yy-text-ellipsis2 layui-font-16">（原创）巨乳少妇姐姐的致命诱惑，疯狂后入狂操，别致的一番体验</h3>
            <div class="topic_user_info Yy-d-flex Yy-ju-sb Yy-mt-10px">
                <span class="user_name layui-elip Yy-text-cen"><span class="iconfont icon-wode"> </span>
                    哈哈哈哈哈哈</span>
                <span class="topic_view layui-elip Yy-text-cen"><span class="iconfont icon-yanjing-"> </span> 99+</span>
                <span class="notactive">没话找话</span>
            </div>
        </div>
    </a> -->

</div>
<!-- 手机底部导航栏 -->
{% include "帖子/Yy天涯/H5/include/tabBar.html" %}
{% endblock %}
{% block js %}
{% include "帖子/Yy天涯/H5/include/Fixbar.html" %}
<script src="/static/CloudJs/Topic/Yy天涯/util.js"></script>
<script>

    layui.use(function () {
        var flow = layui.flow;

        async function a(Objects) {
            /**
             * url、data、type
            */
            const res = await axios({ url: Objects.url, params: Objects.data });
            return res;
        }


        $('.search-inp').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                $('.topic_box').html('');
                let search_text = YyremoveSpaces($('.search-inp').val());
                // 初始化滚动加载
                flow.load({
                    elem: '.topic_box', //流加载容器
                    isAuto: true, //是否自动滚动加载
                    end: '没有更多了', //结束的提示文本
                    done: async function (page, next) { //执行下一页的回调
                        //模拟数据
                        await a({
                            url: '/api/Topic/HaiJiao/search_topic/',
                            data: {
                                page,
                                keyword: search_text
                            },
                            type: 'search'
                        }).then(res => {
                            next(YyTY_Return_Topic_List(res.data.data.data).join(''), page < 20);
                            YyTY_Show_Img(res.data.data.data)
                        });

                    }
                })
            }
        });

        // 初始化滚动加载
        flow.load({
            elem: '.topic_box', //流加载容器
            isAuto: true, //是否自动滚动加载
            end: '没有更多了', //结束的提示文本
            done: async function (page, next) {
                /**
                   * 1. 当页面首次进入时, 先判断本地中是否含有本地数据, 如果有, 则不请求接口, 直接渲染
                */
                let bedi = YyGetLocatStorge(local_key);
                if (bedi == null) {
                    // 当前没有数据，需要请求接口
                    await a({ url: '/api/Topic/HaiJiao/get_hot_topic/', data: { page, }, type: 'hot_list' }).then(res => {
                        next(YyTY_Return_Topic_List(res.data.data.data.results).join(''), page < 20);
                        YyTY_Show_Img(res.data.data.data.results);
                        // 存储进本地
                        YySetLocatStorge(local_key, res.data.data.data.results);
                    });
                } else {
                    // 当前有数据, 直接渲染
                    if (page > bedi.length / 20 && page <= 50) {
                        // 数据已到底, 需要获取更多数据
                        await a({ url: '/api/Topic/HaiJiao/get_hot_topic/', data: { page, }, type: 'hot_list' }).then(res => {
                            next(YyTY_Return_Topic_List(res.data.data.data.results).join(''), page < 20);
                            YyTY_Show_Img(res.data.data.data.results);
                            // 判断当前数据在本地是否已存在, 如果不存在就添加进本地
                            YySetLocatStorge(local_key, [...bedi, ...res.data.data.data.results]);
                        });
                    } else {
                        // 直接渲染
                        let data_list = page == 1 ? bedi.slice(0, 20) : bedi.slice(20 * (page - 1), 20 * page);
                        next(YyTY_Return_Topic_List(data_list).join(''), page < (bedi.length / 20) + 1);
                        YyTY_Show_Img(bedi);
                    }

                }


            }
        })




    });


</script>

{% endblock %}